import React,{useState,useEffect} from 'react';
// 导入页头组件
import Pagehead from '../../../component/pagehead';
// 导入分页组件
import Paging from '../../../component/paging';
//导入接口
import { filmList } from '@/api/film'
import { AudioOutlined } from '@ant-design/icons';
import { Input, Space ,Table,Tag} from 'antd';

const Index = () => {
    const { Search } = Input;
const suffix = (
    <AudioOutlined
      style={{
        fontSize: 16,
        color: '#1890ff',
      }}
    />
  );
    const onSearch = (value) => {
        console.log('关键字',value)
        getFilmList({keyword:value,page})
    };

    //定义表格列
    const columns = [
        {
            title: '序号',
            dataIndex: 'id',
            key: 'id',
            render: (text) => <a>{text}</a>,
        },
        {
            title: '电影院',
            dataIndex: 'name',
            key: 'id',
        },
        {
            title: '所在城市',
            dataIndex: 'city_name',
            key: 'id',
        },
        {
            title: '所在区',
            dataIndex: 'district_name',
            key: 'id',
        },
        {
            title: '具体地址',
            dataIndex: 'address',
            key: 'id',
        },
        {
            title: '状态',
            key: 'id',
            dataIndex: 'status',
            render: (tags) => {
                return (
                    <Tag color={tags==1?'success':'error'}>
                        {tags==1?'正常营业':'暂停营业'}
                    </Tag>
                );
                },
        },
    ]


    //定义页码
    const [page, setpage] = useState(1);
    // 定义搜索关键字
    const [keyword, setkeyword] = useState('');
    //定义电影列表数据
    const [FlimList, setFlimList] = useState([]);
      // 定义总数据条数
    const [total, settotal] = useState(0);
    useEffect(() => {
       //初始化渲染
       getFilmList({page})
    }, [page,keyword]);
    async function getFilmList(params){
        let res = await filmList(params)
        console.log('电影列表数据',res);
        if(res.data.errNo==0){
            setFlimList(res.data.paginate.data)
            settotal(res.data.paginate.total)
            // setkeyword()
        }
    }
    return (
        <div>
            {/* 电影管理 */}
            {/* 页头内容组件 */}
        <Pagehead title='电影列表'>
            <Search placeholder="请输入关键字" onSearch={onSearch} enterButton  style={{width:'300px'}} />
        </Pagehead>
        {/* 表格组件  */}
        <Table columns={columns} dataSource={FlimList} rowKey={(record) => record.id}/>
        {/* 分页组件 */}
        <Paging page={page} total={total} setpage={setpage}></Paging>
        </div>
    );
}

export default Index;
